<template>
  <div class="login">
    <div v-if="!isReset" class="login-wra">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号：" prop="user">
          <el-input v-model="ruleForm.user" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码：" prop="pwd">
          <el-input
            type="password"
            v-model="ruleForm.pwd"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <p @click="goReset">忘记密码？</p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div v-else class="reset-wra">
      <div v-if="!resetSuccs" class="reset-con">
        <h2>重置密码:</h2>
        <p>
          <span>注意：</span
          >您好！当您忘记了自己的账号或者密码，本系统虽然不支持找回。但是您可以在这里尝试通过自己的邮箱去重置您的登录密码或者账号。谢谢！
        </p>
        <div class="email-input">
          <el-input v-model="email" placeholder="请输入您的邮箱" />
        </div>
        <div class="no-pwd" @click="goLogin">没有忘记？</div>
        <el-button type="primary" @click="reset">重置密码</el-button>
      </div>
      <div v-else class="reset">
        <div class="reset-con">
          <h2>重置成功:</h2>
          <p>
            重置数据成功！{{ second }}秒后跳转登录页......
            <span @click="goLogin">立即跳转</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { login, resetLogin } from "@/api/index";
import router from "@/router";

const ruleFormRef = ref();
const isReset = ref(false);
const resetSuccs = ref(false);
const timer = ref();
const second = ref(3);
const ruleForm = reactive({
  user: "",
  pwd: "",
});
const email = ref("");
const rules = reactive({
  user: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "change",
    },
  ],
  pwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
  ],
});

const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await login(ruleForm);
      if (res) {
        if (res.code === 200) {
          ElMessage.success(res.msg);
          router.push("/myLayout");
          localStorage.setItem("user", ruleForm.user);
        } else if (res.code === 201) {
          ElMessage.error(res.msg);
        } else {
          ElMessage.error(res.msg);
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const goReset = () => {
  isReset.value = true;
};
const reset = async () => {
  if (!email.value) {
    ElMessage.warning("邮箱不能为空");
  } else {
    const res = await resetLogin(email.value);
    if (res) {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        email.value = "";
        resetSuccs.value = true;
        timer.value = setInterval(() => {
          second.value--;
          if (second.value === 0) {
            isReset.value = false;
            resetSuccs.value = false;
            clearInterval(timer.value);
          }
        }, 1000);
      } else if (res.code === 201) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error(res.msg);
      }
    }
  }
};
const goLogin = () => {
  isReset.value = false;
  resetSuccs.value = false;
  clearInterval(timer.value);
};
</script>

<style lang="scss" scoped>
.login {
  background-image: linear-gradient(to right bottom, #8ad6af, #ffc992, #ffd2d2);
  .login-wra {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    p {
      color: #999;
      cursor: pointer;
    }
    p:hover {
      color: #575757;
    }
  }
  .reset-wra {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .reset-con {
      width: 50%;
      h2 {
        color: #868585;
      }
      p {
        margin-top: 20px;
        color: #868585;
        line-height: 30px;
        font-size: 18px;
        span {
          color: #ff0000;
          font-size: 20px;
          font-weight: 600;
          padding-right: 10px;
        }
      }
      .no-pwd {
        margin-bottom: 20px;
        color: #999;
        cursor: pointer;
        font-size: 16px
      }
      .no-pwd:hover {
        color: #575757;
      }
      .email-input {
        margin: 20px 0;
      }
    }
  }
}
</style>

